<template>
  <div class="panel">
    <div class="flex justify-between">
      <PatientInfoCard v-bind="patientInfo"/>

      <div class="text-xs flex gap-1">
        <van-button
            class="!h-[24px]"
            size="small"
            type="primary"
        >检验
        </van-button>
        <van-button
            class="!h-[24px]"
            size="small"
            type="success"
        >检查
        </van-button>
      </div>

      <slot></slot>
    </div>

    <div class="panel__more">
      <Filed label="身高" :value="patientInfo.height"/>
      <Filed label="手机号码" :value="patientInfo.phone"/>
      <Filed label="体重" :value="patientInfo.weight"/>
      <Filed label="婚姻状况" :value="patientInfo.marriage"/>

      <!--更多患者信息-->
      <template v-if="seeMorePatientInfo">
        <Filed label="出生日期" :value="patientInfo.birthDay"/>
        <Filed label="职业" :value="patientInfo.occupation"/>
        <Filed label="地址" :value="patientInfo.address" class="col-span-2"/>
      </template>
    </div>

    <div class="text-[#2F54EB] text-[12px] text-center mt-3 cursor-pointer">
      <span v-if="!seeMorePatientInfo" @click="seeMorePatientInfo = true">
        查看更多
      </span>
      <span v-else @click="seeMorePatientInfo = false">收起</span>
    </div>
  </div>
</template>

<script lang="ts">
import {defineComponent} from "vue";
import Filed from "./Filed.vue";
import PatientInfoCard from "./patient-info-card/PatientInfoCard.vue";

export default defineComponent({
  name: "PatientInfoPanel",
  components: {PatientInfoCard, Filed},
  props: {
    info: Object,
  },
  data() {
    return {
      seeMorePatientInfo: false,
    };
  },
  computed: {
    patientInfo() {
      const info = this.info;
      return {
        name: info.patientName,
        age: info.patientAge,
        sex: info.patientSexStr,
        phone: info.patientPhone,
        height: info.patientHeight ? `${info.patientHeight} cm` : "",
        weight: info.patientWeight ? `${info.patientWeight} kg` : "",
        marriage: info.patientMarriageName,
        birthDay: info.patientBirthDay,
        idNumber: info.patientIdNumberStr,
        occupation: info.patientOccupation,
        address: info.patientAddress,
      };
    },
  },
  watch: {},
  beforeCreate() {
  },
  created() {
  },
  beforeMount() {
  },
  mounted() {
  },
  beforeUpdate() {
  },
  updated() {
  },
  methods: {
    jumpToPage(path) {
      this.$router.push({
        path: path,
        query: {
          idCard: this.info.patientIdNumber,
        },
      });
    },
  },
  beforeUnmount() {
  },
  unmounted() {
  },
});
</script>

<style scoped lang="scss">
.panel {
  padding: 16px 24px;

  &__more {
    margin-top: 16px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
}
</style>
